<template>
    <div>

        <div style="margin-bottom: 10px">
            <slot name="header"></slot>
        </div>
        <slot name="main"></slot>
        <div style="position: relative">
            <el-pagination
                    :style="'text-align:' + (position != null ? position : 'left')"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="count">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "myFooter",
        props: {
            count: {
                type: Number,
                required: true
            },
            position: {
                type: String,
            }
        },
        data() {
            return {
                page: 1,
                limit: 10
            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(val);
                this.limit = val;
                this.$emit("change", this.page, this.limit);
            },
            handleCurrentChange(val) {
                console.log(val);
                this.page = val;
                this.$emit("change", this.page, this.limit);
            }
        }
    }
</script>

<style scoped>
    .el-pagination {
        margin-top: 10px;
    }
</style>